<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale-1.0">
    <title>在线答题模块深度分析信息图</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        }
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            height: 300px;
            max-height: 400px;
        }
        @media (min-width: 768px) {
            .chart-container {
                height: 350px;
            }
        }
        .flowchart-node {
            border: 2px solid;
            padding: 0.75rem 1.25rem;
            border-radius: 0.5rem;
            text-align: center;
            min-width: 120px;
            transition: transform 0.3s ease;
        }
        .flowchart-node:hover {
            transform: translateY(-5px);
        }
        .flowchart-arrow {
            position: relative;
            text-align: center;
            font-size: 2rem;
            line-height: 1;
        }
        .flowchart-arrow.down::after {
            content: '▼';
            display: block;
        }
        .flowchart-arrow.right::after {
            content: '►';
            display: inline-block;
            margin: 0 0.5rem;
        }
        .connector-line-horizontal {
            height: 2px;
            width: 100%;
        }
        .connector-line-vertical {
            width: 2px;
            height: 100%;
            margin: 0 auto;
        }
        .kpi-card {
            padding: 1.5rem;
            border-radius: 0.75rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            text-align: center;
        }
        .kpi-value {
            font-size: 2.5rem;
            font-weight: bold;
            line-height: 1;
        }
        .kpi-label {
            font-size: 0.875rem;
            margin-top: 0.5rem;
        }
        .icon-placeholder {
            font-size: 2.5rem;
            width: 4rem;
            height: 4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin: 0 auto 0.75rem auto;
        }
    </style>
</head>
<body class="bg-slate-100 text-slate-800">
    <!-- 
        Chosen Color Palette: Energetic & Playful 
        (Using #118AB2 as primary, #06D6A0 as green, #FFD166 as yellow, #FF6B6B as red, #073B4C as dark navy text accent, bg-slate-100 for page, bg-white for cards)
    -->
    <!-- 
        Infographic Narrative & Structure Plan:
        1. Hero: Introduce the "Online Answering Module", its dual AI & CV capabilities.
        2. Intelligent Test Generation: Explain adaptive testing (IRT, CAT), benefits (fairness, security). Visualize process.
        3. Real-time Proctoring: Detail CV for integrity (face detection, tracking, behavior analysis). Show tracker comparison.
        4. Student Engagement Assessment: How CV monitors attention/engagement (gaze, posture). Show engagement stats.
        5. Module Architecture: A comprehensive HTML/CSS flowchart based on report's Section 5.
        6. Advantages & Future: Summarize benefits and future enhancements.
    -->
    <!-- 
        Visualization Choices & Justifications (NO SVG, NO MERMAID):
        - Section 1 Title: Text. Goal: Inform.
        - Introduction Paragraph: Text. Goal: Inform.
        - Intelligent Test Generation Section:
            - Title & Intro: Text. Goal: Inform.
            - Key Benefits (Personalized, Fair, Secure): HTML styled cards/list. Goal: Inform. Method: HTML/CSS.
            - Adaptive Test Flow (Simplified): HTML/CSS Flowchart (Nodes: Student Input -> AI Analyzes -> Question Selected -> Student Answers -> Loop). Goal: Organize. Method: HTML/CSS. (Confirming NO SVG/Mermaid)
            - IRT Parameters (Difficulty, Discrimination, Guessing): Small info cards. Goal: Inform. Method: HTML/CSS.
        - Real-time Proctoring Section:
            - Title & Intro: Text. Goal: Inform.
            - Proctoring Process Overview: HTML/CSS Flowchart (Camera Input -> OpenCV Processing -> Anomaly Detection -> Alert). Goal: Organize. Method: HTML/CSS. (Confirming NO SVG/Mermaid)
            - OpenCV Tracker Comparison (Speed, Accuracy, Occlusion): Bar Chart. Goal: Compare. Library: Chart.js (Canvas). Data from report table 3.5. (Confirming NO SVG/Mermaid)
            - Suspicious Behaviors (Gaze Off-Screen, Unusual Posture, Multiple Faces): Icons (Unicode like  दूरदृष्टि, 👤, 👥) with text. Goal: Inform. Method: HTML/CSS/Unicode. (Confirming NO SVG/Mermaid)
        - Student Engagement Assessment Section:
            - Title & Intro: Text. Goal: Inform.
            - Engagement Increase Stat (67%): Big Number + Donut Chart. Goal: Inform. Library: Chart.js (Canvas). (Confirming NO SVG/Mermaid)
            - Confusion/Disengagement Detection Accuracy (89%): Big Number. Goal: Inform. Method: HTML/CSS.
            - Gaze Metrics (Duration, Points, Direction, Blink Rate): Styled list/cards. Goal: Inform. Method: HTML/CSS.
        - Module Architecture Diagram Section:
            - Title & Intro: Text. Goal: Inform.
            - Full Architecture Diagram: Complex HTML/CSS Flowchart with multiple interconnected nodes based on report's Section 5. Goal: Organize. Method: HTML/CSS. (Confirming NO SVG/Mermaid)
        - Core Advantages & Future Outlook Section:
            - Title & Intro: Text. Goal: Inform.
            - Summary of Advantages: Styled list/cards. Goal: Inform. Method: HTML/CSS.
            - Future Enhancements (AI Content Gen, Multimodal Fusion, XAI): Styled list/cards. Goal: Inform. Method: HTML/CSS.
        - General: All charts use Chart.js (Canvas). All diagrams use HTML/CSS/Unicode. NO SVG. NO MERMAID JS.
    -->

    <div class="container mx-auto p-4 md:p-8">

        <header class="text-center mb-12">
            <h1 class="text-4xl md:text-5xl font-bold text-[#118AB2] mb-4">在线答题模块：融合AI与计算机视觉的革新</h1>
            <p class="text-lg md:text-xl text-slate-600 max-w-3xl mx-auto">一个深度集成了人工智能的个性化测评与计算机视觉的智能监考及学习状态分析的尖端在线评估系统。</p>
        </header>

        <section id="intelligent-generation" class="mb-16">
            <div class="bg-white rounded-xl shadow-xl p-6 md:p-8">
                <h2 class="text-3xl font-semibold text-[#118AB2] mb-6 text-center">智能试卷生成：AI驱动的自适应评估</h2>
                <p class="text-slate-700 mb-8 text-center max-w-2xl mx-auto">告别“一刀切”的传统考试，本模块为每位学生量身定制独特的试卷，根据其实时表现动态调整难度与内容，实现真正的个性化评估。</p>
                
                <div class="grid md:grid-cols-3 gap-6 mb-8 text-center">
                    <div class="kpi-card bg-[#E0F2FE] border border-[#118AB2]/30">
                        <div class="icon-placeholder bg-[#118AB2] text-white">💡</div>
                        <h3 class="text-xl font-semibold text-[#073B4C] mb-2">增强随机性与安全性</h3>
                        <p class="text-sm text-slate-600">动态生成独一无二的试卷，有效防止作弊，保障考试安全。</p>
                    </div>
                    <div class="kpi-card bg-[#D1FAE5] border border-[#06D6A0]/30">
                         <div class="icon-placeholder bg-[#06D6A0] text-white">⚖️</div>
                        <h3 class="text-xl font-semibold text-[#073B4C] mb-2">提升公平性与精确度</h3>
                        <p class="text-sm text-slate-600">基于项目反应理论(IRT)精确评估学生能力，确保评估的公正性。</p>
                    </div>
                    <div class="kpi-card bg-[#FEF3C7] border border-[#FFD166]/30">
                         <div class="icon-placeholder bg-[#FFD166] text-white">🎯</div>
                        <h3 class="text-xl font-semibold text-[#073B4C] mb-2">个性化学习路径</h3>
                        <p class="text-sm text-slate-600">识别知识薄弱点，引导个性化学习，提升学习效率与成果。</p>
                    </div>
                </div>

                <h3 class="text-2xl font-semibold text-[#073B4C] mb-4 text-center">自适应测试核心流程</h3>
                <div class="flex flex-col items-center space-y-4 md:space-y-0 md:flex-row md:justify-around md:space-x-4 mb-8">
                    <div class="flowchart-node border-[#118AB2] text-[#118AB2] bg-blue-50">学生开始答题</div>
                    <div class="flowchart-arrow down md:hidden text-[#118AB2]"></div>
                    <div class="flowchart-arrow right hidden md:block text-[#118AB2]"></div>
                    <div class="flowchart-node border-[#06D6A0] text-[#06D6A0] bg-green-50">AI分析作答情况<br/>(IRT能力估计)</div>
                    <div class="flowchart-arrow down md:hidden text-[#06D6A0]"></div>
                    <div class="flowchart-arrow right hidden md:block text-[#06D6A0]"></div>
                    <div class="flowchart-node border-[#FFD166] text-[#FFD166] bg-yellow-50">系统选择下一题目<br/>(难度适配)</div>
                    <div class="flowchart-arrow down md:hidden text-[#FFD166]"></div>
                    <div class="flowchart-arrow right hidden md:block text-[#FFD166]"></div>
                     <div class="flowchart-node border-[#FF6B6B] text-[#FF6B6B] bg-red-50">循环至考试结束</div>
                </div>
                <p class="text-sm text-slate-600 text-center">该流程通过项目反应理论(IRT)和计算机化自适应测试(CAT)实现，确保每位考生都得到最适合其能力水平的题目，从而精确评估真实能力。</p>
            </div>
        </section>

        <section id="realtime-proctoring" class="mb-16">
            <div class="bg-white rounded-xl shadow-xl p-6 md:p-8">
                <h2 class="text-3xl font-semibold text-[#118AB2] mb-6 text-center">实时监考：计算机视觉保障考试诚信</h2>
                <p class="text-slate-700 mb-8 text-center max-w-2xl mx-auto">利用OpenCV等先进计算机视觉技术，对考生进行实时、无感的监控，通过人脸检测、跟踪及行为分析，有效识别异常行为，维护考试公平。</p>

                <div class="grid md:grid-cols-2 gap-8 items-center">
                    <div>
                        <h3 class="text-2xl font-semibold text-[#073B4C] mb-4">OpenCV目标跟踪算法性能对比</h3>
                        <p class="text-sm text-slate-600 mb-4">选择合适的跟踪算法对持续监控至关重要。以下是部分OpenCV跟踪器在关键性能指标上的对比（基于报告概述）：</p>
                        <div class="chart-container h-[350px] md:h-[400px]">
                            <canvas id="trackerChart"></canvas>
                        </div>
                         <p class="text-xs text-slate-500 mt-2 text-center">注：实际性能可能因具体实现和环境而异。</p>
                    </div>
                    <div>
                        <h3 class="text-2xl font-semibold text-[#073B4C] mb-4">关键异常行为识别</h3>
                        <div class="space-y-4">
                            <div class="flex items-center p-4 bg-red-50 border border-red-200 rounded-lg">
                                <span class="text-3xl mr-4 text-[#FF6B6B]">👀</span>
                                <div>
                                    <h4 class="font-semibold text-[#073B4C]">视线长时间偏离</h4>
                                    <p class="text-sm text-slate-600">可能查看未经授权的材料。</p>
                                </div>
                            </div>
                            <div class="flex items-center p-4 bg-yellow-50 border border-yellow-300 rounded-lg">
                                <span class="text-3xl mr-4 text-[#FFD166]">🤸</span>
                                <div>
                                    <h4 class="font-semibold text-[#073B4C]">坐姿大幅度、频繁变动</h4>
                                    <p class="text-sm text-slate-600">可疑的不安或试图与他人交流。</p>
                                </div>
                            </div>
                            <div class="flex items-center p-4 bg-red-50 border border-red-200 rounded-lg">
                                <span class="text-3xl mr-4 text-[#FF6B6B]">👥</span>
                                <div>
                                    <h4 class="font-semibold text-[#073B4C]">检测到多张人脸</h4>
                                    <p class="text-sm text-slate-600">可能存在他人协助。</p>
                                </div>
                            </div>
                            <div class="flex items-center p-4 bg-blue-50 border border-blue-200 rounded-lg">
                                 <span class="text-3xl mr-4 text-[#118AB2]">🗣️</span>
                                <div>
                                    <h4 class="font-semibold text-[#073B4C]">异常声音或口型</h4>
                                    <p class="text-sm text-slate-600">可能在朗读题目或与他人交流。</p>
                                </div>
                            </div>
                        </div>
                         <p class="text-sm text-slate-600 mt-6">系统结合多种线索，通过预设阈值和机器学习模型进行判断，及时发出警报并记录，供人工复核。</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="student-engagement" class="mb-16">
            <div class="bg-white rounded-xl shadow-xl p-6 md:p-8">
                <h2 class="text-3xl font-semibold text-[#118AB2] mb-6 text-center">学生参与度与注意力评估</h2>
                <p class="text-slate-700 mb-8 text-center max-w-2xl mx-auto">模块超越作弊检测，通过分析凝视、姿态等视觉线索，客观评估学生的学习状态，为教育者提供宝贵的学习分析洞察。</p>
                <div class="grid md:grid-cols-3 gap-6 mb-8">
                    <div class="kpi-card bg-[#D1FAE5]">
                        <div class="kpi-value text-[#06D6A0]">67%</div>
                        <div class="kpi-label text-[#047857]">学生在采用计算机视觉增强学习的课堂中<strong class="block">参与度平均提升</strong>(据报告引用研究)</div>
                    </div>
                    <div class="kpi-card bg-[#E0F2FE]">
                        <div class="kpi-value text-[#118AB2]">89%</div>
                        <div class="kpi-label text-[#0C4A6E]">计算机视觉系统在检测学生<strong class="block">困惑或脱离状态方面的准确率</strong>(据报告引用研究)</div>
                    </div>
                    <div class="chart-container h-[200px] md:h-[250px] md:col-span-1 flex flex-col justify-center">
                         <h3 class="text-xl font-semibold text-[#073B4C] mb-2 text-center">参与度指标示例</h3>
                        <canvas id="engagementChart"></canvas>
                    </div>
                </div>

                <h3 class="text-2xl font-semibold text-[#073B4C] mb-4 text-center">关键评估维度</h3>
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="p-6 bg-slate-50 rounded-lg border border-slate-200">
                        <h4 class="text-xl font-semibold text-[#118AB2] mb-2">凝视分析</h4>
                        <ul class="list-disc list-inside text-slate-600 space-y-1 text-sm">
                            <li><strong>凝视时长/注视时长：</strong>衡量对特定区域（如考题）的关注持久度。</li>
                            <li><strong>凝视点/注视次数：</strong>反映对相关内容的积极探寻。</li>
                            <li><strong>凝视方向：</strong>判断注意力是否集中在考试界面。</li>
                            <li><strong>眨眼频率：</strong>作为认知状态（专注、分心、疲劳）的间接指标。</li>
                        </ul>
                    </div>
                    <div class="p-6 bg-slate-50 rounded-lg border border-slate-200">
                        <h4 class="text-xl font-semibold text-[#06D6A0] mb-2">姿态分析</h4>
                        <ul class="list-disc list-inside text-slate-600 space-y-1 text-sm">
                            <li><strong>姿态分类：</strong>识别如端坐（专注）、前倾（投入）、懈怠（疲劳）等姿态。</li>
                            <li><strong>姿态动态：</strong>分析姿态随时间变化，洞察学生状态演变。</li>
                            <li><strong>人体工程学评估：</strong>将姿态分为“良好”、“中性”或“不良”，间接反映舒适度与参与度。</li>
                        </ul>
                    </div>
                </div>
                 <p class="text-sm text-slate-600 mt-6 text-center">这些数据驱动的洞察帮助教育者调整教学策略，实现个性化干预，提升整体学习体验。</p>
            </div>
        </section>
        
        <section id="module-architecture" class="mb-16">
            <div class="bg-white rounded-xl shadow-xl p-6 md:p-8">
                <h2 class="text-3xl font-semibold text-[#118AB2] mb-6 text-center">模块架构与数据流</h2>
                <p class="text-slate-700 mb-8 text-center max-w-2xl mx-auto">以下是模块关键组件及其相互作用的简化表示，展示了从数据输入到处理，再到最终输出的完整流程。</p>

                <div class="overflow-x-auto p-4">
                    <div class="flex flex-col items-center space-y-6">
                        
                        <div class="flowchart-node bg-slate-100 border-slate-400 text-slate-700 shadow-md w-full md:w-auto"><strong>输入层:</strong> 摄像头, 学生数据, 题库, 考试目标</div>
                        <div class="flowchart-arrow down text-slate-400"></div>

                        <div class="grid md:grid-cols-2 gap-6 w-full">
                            <div class="bg-blue-50 p-4 rounded-lg border border-blue-200 shadow">
                                <div class="flowchart-node bg-[#E0F2FE] border-[#118AB2] text-[#118AB2] mb-3 mx-auto"><strong>智能试卷生成模块</strong></div>
                                <div class="space-y-2 text-sm text-center">
                                    <div class="flowchart-node bg-white border-blue-300 text-blue-700 text-xs p-2">AI/ML核心 (IRT引擎, 自适应算法)</div>
                                    <div class="flowchart-arrow down text-blue-300 text-base"></div>
                                    <div class="flowchart-node bg-white border-blue-300 text-blue-700 text-xs p-2">题目选择逻辑</div>
                                    <div class="flowchart-arrow down text-blue-300 text-base"></div>
                                    <div class="flowchart-node bg-white border-blue-300 text-blue-700 text-xs p-2">试卷组装器</div>
                                </div>
                            </div>

                            <div class="bg-green-50 p-4 rounded-lg border border-green-200 shadow">
                                <div class="flowchart-node bg-[#D1FAE5] border-[#06D6A0] text-[#06D6A0] mb-3 mx-auto"><strong>实时监控模块</strong></div>
                                <div class="space-y-2 text-sm text-center">
                                    <div class="flowchart-node bg-white border-green-300 text-green-700 text-xs p-2">视频流处理器 (OpenCV)</div>
                                    <div class="flowchart-arrow down text-green-300 text-base"></div>
                                    <div class="flowchart-node bg-white border-green-300 text-green-700 text-xs p-2">人脸检测 (Haar) & 目标跟踪 (KCF/CSRT)</div>
                                    <div class="flowchart-arrow down text-green-300 text-base"></div>
                                    <div class="flowchart-node bg-white border-green-300 text-green-700 text-xs p-2">行为分析 (视线, 姿态, 表情)</div>
                                     <div class="flowchart-arrow down text-green-300 text-base"></div>
                                    <div class="flowchart-node bg-white border-green-300 text-green-700 text-xs p-2">异常行为检测逻辑 (阈值, ML分类器)</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="w-full flex justify-center items-center my-2">
                            <div class="connector-line-horizontal bg-slate-300 h-[2px] w-1/4"></div>
                            <div class="flowchart-arrow down text-slate-400 mx-2"></div>
                            <div class="flowchart-arrow down text-slate-400 mx-2"></div>
                            <div class="connector-line-horizontal bg-slate-300 h-[2px] w-1/4"></div>
                        </div>
                        <div class="w-px bg-slate-300 h-6 md:hidden"></div>


                        <div class="flowchart-node bg-yellow-50 border-yellow-400 text-yellow-700 shadow-md w-full md:w-auto"><strong>输出/反馈层:</strong> 个性化考试界面, 监考员仪表盘 (实时警报), 学生参与度分析, 性能数据存储</div>
                    </div>
                </div>
                 <p class="text-sm text-slate-600 mt-6 text-center">此架构确保了模块两大核心功能——智能组卷与实时监控的协同工作，并为教育者和学生提供有价值的反馈与数据支持。</p>
            </div>
        </section>

        <section id="advantages-future" class="mb-8">
            <div class="bg-white rounded-xl shadow-xl p-6 md:p-8">
                <h2 class="text-3xl font-semibold text-[#118AB2] mb-6 text-center">核心优势与未来展望</h2>
                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <h3 class="text-2xl font-semibold text-[#073B4C] mb-4">模块核心优势</h3>
                        <ul class="space-y-3">
                            <li class="flex items-start p-3 bg-blue-50 rounded-md">
                                <span class="text-xl text-[#118AB2] mr-3">✅</span>
                                <p class="text-sm text-slate-700"><strong>高度个性化评估：</strong>真正因材施教，精准衡量学生能力。</p>
                            </li>
                            <li class="flex items-start p-3 bg-green-50 rounded-md">
                                <span class="text-xl text-[#06D6A0] mr-3">🛡️</span>
                                <p class="text-sm text-slate-700"><strong>增强的考试安全与公平：</strong>有效防作弊，确保评估过程公正透明。</p>
                            </li>
                            <li class="flex items-start p-3 bg-yellow-50 rounded-md">
                                 <span class="text-xl text-[#FFD166] mr-3">📊</span>
                                <p class="text-sm text-slate-700"><strong>数据驱动的教育洞察：</strong>为教师提供学生学习状态的深度分析。</p>
                            </li>
                             <li class="flex items-start p-3 bg-red-50 rounded-md">
                                 <span class="text-xl text-[#FF6B6B] mr-3">⏱️</span>
                                <p class="text-sm text-slate-700"><strong>提升运营效率：</strong>自动化组卷与初步监考，减轻教师负担。</p>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="text-2xl font-semibold text-[#073B4C] mb-4">未来展望与研究方向</h3>
                         <ul class="space-y-3">
                            <li class="flex items-start p-3 bg-slate-50 rounded-md">
                                <span class="text-xl text-slate-500 mr-3">🚀</span>
                                <p class="text-sm text-slate-700"><strong>高级AI内容生成：</strong>自动从课程材料创建新颖多样的试题。</p>
                            </li>
                            <li class="flex items-start p-3 bg-slate-50 rounded-md">
                                <span class="text-xl text-slate-500 mr-3">🔗</span>
                                <p class="text-sm text-slate-700"><strong>多模态数据融合：</strong>结合音频、键盘行为等进行更全面的分析。</p>
                            </li>
                            <li class="flex items-start p-3 bg-slate-50 rounded-md">
                                 <span class="text-xl text-slate-500 mr-3">🔍</span>
                                <p class="text-sm text-slate-700"><strong>可解释人工智能 (XAI)：</strong>提升监考决策的透明度与信任度。</p>
                            </li>
                             <li class="flex items-start p-3 bg-slate-50 rounded-md">
                                 <span class="text-xl text-slate-500 mr-3">🎯</span>
                                <p class="text-sm text-slate-700"><strong>自适应个性化阈值：</strong>动态调整行为检测敏感度，减少误报。</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <footer class="text-center mt-12 py-6 border-t border-slate-300">
            <p class="text-sm text-slate-500">&copy; 2025 在线答题模块分析。信息图由AI生成，仅供参考。</p>
        </footer>

    </div>

    <script>
        function wrapLabels(label, maxWidth) {
            if (typeof label !== 'string') {
                return label; 
            }
            if (label.length <= maxWidth) {
                return label;
            }
            const words = label.split(' ');
            const lines = [];
            let currentLine = '';
            for (const word of words) {
                if ((currentLine + word).length > maxWidth && currentLine.length > 0) {
                    lines.push(currentLine.trim());
                    currentLine = word + ' ';
                } else {
                    currentLine += word + ' ';
                }
            }
            if (currentLine.trim().length > 0) {
                lines.push(currentLine.trim());
            }
            return lines.length > 0 ? lines : [label]; // Return original if somehow lines array is empty
        }

        const commonTooltipTitleCallback = function(tooltipItems) {
            const item = tooltipItems[0];
            let label = item.chart.data.labels[item.dataIndex];
            if (Array.isArray(label)) {
              return label.join(' ');
            } else {
              return label;
            }
        };
        
        const commonChartOptions = {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                    labels: {
                        font: { size: 10 }
                    }
                },
                tooltip: {
                    callbacks: {
                        title: commonTooltipTitleCallback
                    },
                    backgroundColor: '#073B4C',
                    titleFont: { size: 14, weight: 'bold' },
                    bodyFont: { size: 12 },
                    padding: 10,
                    cornerRadius: 4,
                    displayColors: true
                }
            },
            scales: {
                x: {
                    ticks: {
                        font: { size: 10 },
                        callback: function(value, index, values) {
                            const label = this.getLabelForValue(value);
                            return wrapLabels(label, 8); // Reduced for X-axis tick readability
                        }
                    },
                    grid: { display: false }
                },
                y: {
                    ticks: { font: { size: 10 } },
                    beginAtZero: true,
                    grid: { color: '#e2e8f0' }
                }
            }
        };

        const trackerData = {
            labels: ['KCF', 'CSRT', 'MOSSE', 'GOTURN', 'MedianFlow', 'TLD', 'MIL', 'BOOSTING'].map(l => wrapLabels(l, 16)),
            datasets: [
                {
                    label: '速度 (越高越快)',
                    data: [8, 3, 10, 7, 6, 2, 5, 4], 
                    backgroundColor: '#118AB2',
                    borderColor: '#0E718E',
                    borderWidth: 1
                },
                {
                    label: '准确性 (越高越准)',
                    data: [7, 9, 4, 6, 6, 8, 5, 5],
                    backgroundColor: '#06D6A0',
                    borderColor: '#05B386',
                    borderWidth: 1
                },
                                {
                    label: '准确性 (越高越准)',
                    data: [7, 9, 4, 6, 6, 8, 5, 5],
                    backgroundColor: '#06D6A0',
                    borderColor: '#05B386',
                    borderWidth: 1
                },
                {
                    label: '遮挡处理 (越高越好)',
                    data: [3, 8, 2, 3, 5, 7, 5, 2],
                    backgroundColor: '#FFD166',
                    borderColor: '#E0B550',
                    borderWidth: 1
                }

                {
                    label: '遮挡处理 (越高越好)',
                    data: [3, 8, 2, 3, 5, 7, 5, 2],
                    backgroundColor: '#FFD166',
                    borderColor: '#E0B550',
                    borderWidth: 1
                }

            ]
        };
        
        new Chart(document.getElementById('trackerChart'), {
            type: 'bar',
            data: trackerData,
            options: { ...commonChartOptions }
        });

        const engagementData = {
            labels: [wrapLabels('参与度提升部分 (67%)', 16), wrapLabels('其他 (33%)', 16)],
            datasets: [{
                label: '学生参与度提升',
                data: [67, 33],
                backgroundColor: ['#06D6A0', '#E2E8F0'],
                borderColor: ['#05B386', '#CBD5E1'],
                borderWidth: 1,
                hoverOffset: 4
            }]
        };
        new Chart(document.getElementById('engagementChart'), {
            type: 'doughnut',
            data: engagementData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: true, position: 'bottom', labels: {font: {size: 10}} },
                    tooltip: {
                        callbacks: {
                             title: commonTooltipTitleCallback,
                             label: function(context) {
                                let label = context.dataset.label || '';
                                if (label) {
                                    label += ': ';
                                }
                                if (context.parsed !== null) {
                                    label += context.parsed + '%';
                                }
                                return label;
                            }
                        },
                        backgroundColor: '#073B4C',
                        titleFont: { size: 14, weight: 'bold' },
                        bodyFont: { size: 12 },
                        padding: 10,
                        cornerRadius: 4,
                        displayColors: false
                    }
                },
                cutout: '60%'
            }
        });
    </script>
</body>
</html>
